<template>
  <div>
    <div class="title">
      <div>下拉选择框，下拉内容是树形结构</div>
      <div>vue + element-ui</div>
    </div>
    <div class="content">
      <div>
        <select-tree :option="option" :data="data" @change="dataChange"></select-tree>
      </div>
      <div style="width: 500px; margin-top:20px;">
        <select-tree :option="option1" :data="data" @change="dataChange" :expandAry="expandAry"></select-tree>
      </div>
    </div>
  </div>
</template>
<script>
import selectTree from './selectTree'
export default {
  components: {selectTree},
  data () {
    return {
      expandAry: ['1', '3'],
      option: {},
      option1: {
        label: 'test',
        labelWidth: 60,
        placeholder: '请选择节点',
        defaultId: '2'
      },
      data: [
        {
          label: '节点 1',
          id: '1',
          value: '1',
          children: [{
            label: '节点 1-1',
            id: '2',
            value: '1-1'
          }, {
            label: '节点 1-2',
            value: '1-2',
            id: '3',
            children: [{
              label: '节点 1-2-1',
              id: '4',
              value: '1-2-1',
              children: [{
                label: '节点1-2-1-1',
                id: '5',
                value: '1-2-1-1'
              }]
            }]
          }]
        },
        {
          label: '节点 2',
          value: '2',
          id: '6',
          children: [{
            label: '节点 2-1',
            id: '7',
            value: '2-1'
          }]
        }
      ]
    }
  },
  methods: {
    dataChange (oldValue, newValue) {
      console.log(oldValue, newValue);
    }
  }
}
</script>
<style scoped>
.title{
  text-align: center;
  margin-bottom: 20px;
}
</style>
